<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:composite="http://java.sun.com/jsf/composite"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:rich="http://richfaces.org/rich">

<composite:interface>
  <composite:attribute name="sortingList" type="org.zanata.action.SortingType"
    required="true"/>
  <composite:attribute name="sortAction" required="true"
    method-signature="void action()"
    shortDescription="sorting method with signature of void action()"/>
  <composite:attribute name="id" required="true" type="java.lang.String"
    shortDescription="id of this component"/>
  <composite:attribute name="render" required="true" type="java.lang.String"
    shortDescription="element to re-render after sorting"/>
  <composite:attribute name="oncomplete"
    shortDescription="The client-side script method to be called after the DOM is updated"/>
  <composite:attribute name="onbegin"
    shortDescription="The client-side script method to be called before sorting."/>
  <composite:attribute name="status"
    shortDescription=">Name of the request status component that will indicate the status of the sorting request"/>
</composite:interface>

<composite:implementation>
  <div id="#{cc.attrs.id}"
    class="dropdown dropdown--header dropdown--small dropdown--right js-dropdown">
    <a class="dropdown__toggle js-dropdown__toggle" href="#">
      #{msgs['jsf.Sort']}
      <i class="i i--arrow-down dropdown__toggle__icon"></i>
    </a>
    <h:form styleClass="l--push-bottom-0">
      <ul class="dropdown__content js-dropdown__content" role="content"
        aria-labelledby="dropdownContent">
        <ui:repeat value="#{cc.attrs.sortingList.sortOptions}" var="sortOption">
          <li>
            <a href="javascript:void(0)" jsfc="a4j:commandLink" tabindex="-1"
              status="#{cc.attrs.status}" action="#{cc.attrs.sortAction}"
              oncomplete="#{cc.attrs.oncomplete}"
              styleClass="#{cc.attrs.sortingList.selectedSortOption eq sortOption ? 'is-active' : ''} js-sort-option"
              render="#{cc.attrs.render}" onbegin="#{cc.attrs.onbegin}">
              #{sortOption.display}
              <f:setPropertyActionListener
                target="#{cc.attrs.sortingList.selectedSortOption}"
                value="#{sortOption}"/>
            </a>
          </li>
        </ui:repeat>
      </ul>
    </h:form>
  </div>

</composite:implementation>
</html>
